<!DOCTYPE html>
<html>
<head>
	<title>首页</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content='width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui' name='viewport'/>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <style type="text/css">
    	.swiper-container {
         width: 100%;
      }
      .swiper-slide {
         text-align: center;
         font-size: 18px;
         background: transparent;
         display: -webkit-box;
         display: -ms-flexbox;
         display: -webkit-flex;
         display: flex;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         -webkit-justify-content: center;
         justify-content: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
         -webkit-align-items: center;
         align-items: center;
         cubic-bezier(0,0,0.58,1)
      }
   </style>
</head>
<body>
	<section id="container">
		<header class="header">
			<div class="panel-one">
				<div class="panel-top">
					<div class="register f-left">注册</div>
					<div class="login f-left">登陆</div>
					<ul class="f-right">
						<li>
							<img src=""><span>收藏本站</span>
						</li>
						<li>
							<img src=""><span>关注微信公账号</span>
						</li>
						<li>
							<img src=""><span>语言</span>
						</li>
					</ul>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="panel-two">
				<div class="logo"><img src="image/logo-ch.png" width="295px" style="margin-bottom: -30px">
				</div>
				<form class="search f-right">
					<input type="text" name="search" placeholder="请输入关键字">
					<span>搜索</span>
				</form>
			</div>
			<nav class="nav-panel">
				<ul class="navbar">
					<li><a href="index.html">首页</a></li>
					<li>
						<a href="#">关于华领</a>
					</li>
					<li class="pro-center">
						<a>产品中心</a>
						<ul class="pro-list">
							<li class="pro-list-one">
								<b>按系列分类</b>
								<ul class="pro-catogary-list">
									<li><a>SMA系列</a></li>
									<li><a>3.5系列</a></li>
									<li><a>4.0系列</a></li>
									<li><a>55系列</a></li>
								</ul>
							</li>
							<li class="pro-list-one">
								<b>按应用分类</b>
								<ul class="pro-application-list">
									<li><a>MA系列</a></li>
									<li><a>3.5系列</a></li>
									<li><a>4.0系列</a></li>
									<li><a>55系列</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a>新闻动态</a></li>
					<li><a>技术支持</a></li>
					<li><a>下载中心</a></li>
					<li><a>联系我们</a></li>
				</ul>
			</nav>
		</header>
		<section class="content">
			<div class="road-path">
				<img src="image/icon-home.png" class="icon-home">
				<span>首页</span>
			</div>
			<div class="swiper-container">
                  <div class="swiper-wrapper">
                        <div class="swiper-slide" style="">
                              <div style="text-align:left;line-height: 45px">
                                    <img src="images/index/logo1.png">
                                    <h1>全新H系列液晶一体机</h1>
                                    <p style="letter-spacing: 5px">专为教育行业定制，与多种平台软件完美融合</p>
                              </div>
                              <img src="images/index/ban1.png" id="preload-01" style="margin-left: 50px;width: 45%;margin-top: 30px">
                        </div>
                        <div class="swiper-slide"><img src="images/index/ban2.png" id="preload-02" style="width: 100%;position:absolute;top:50%;left: 50%;transform: translate(-50% , -10%);-webkit-transform: translate(-50% , 0)"></div>
                        <div class="swiper-slide" style="position:relative">
                              <img src="images/index/ban3.png" id="preload-03" style="width: 100%;position:absolute;top:50%;left: 50%;transform: translate(-50% , 5%);-webkit-transform: translate(-50% , 5%) ">
                        </div>
                  </div>
                    <!-- Add Pagination -->
                  <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                  <!-- <div class="swiper-button-next"></div>
                  <div class="swiper-button-prev"></div> -->
            </div>
		</section>
		<footer id="footer">
			<div class="content">
				<img src="image/icon-logo.png" style="width: 70px">
				<div class="contact">
					<h4>联系我们</h4>
					<label>地址: </label><span></span><br>
					<label>电话: </label><span>123456788</span><br>
					<label>邮箱: </label><span>123456788</span>
				</div>
				<div class="product">
					<h4>产品中心</h4>
					<label>地址: </label><span></span><br>
					<label>电话: </label><span>123456788</span><br>
					<label>邮箱: </label><span>123456788</span>
				</div>
				<div style="margin: 15px;color:#fff;text-align: center">Copyright © 2014 深圳市华领科技有限公司 粤ICP备10216178号-1</div>
			</div>
		</footer>
	</section>
	<script src="js/jquery.js"></script>
	<script type="text/javascript" src="js/swiper.min.js"></script>
	<script type="text/javascript">
		var swiper = new Swiper('.swiper-container', {
              pagination: '.swiper-pagination',
              /*nextButton: '.swiper-button-next',
              prevButton: '.swiper-button-prev',*/
              paginationClickable: true,
              spaceBetween: 2000,
              speed: 2000,
              centeredSlides: true,
              autoplay: 5000,
              loop: true,
              /*effect: 'fade',
              fade: {
                    crossFade: true,
                  },*/
              autoplayDisableOnInteraction: false,
          });
		$(".pro-center").hover(function(){
			$(this).find("a").addClass("active");
			$(this).find(".pro-list").fadeIn();
		},function(){
			$(this).find("a").removeClass("active");
			$(this).find(".pro-list").fadeOut();
		})
		$(".pro-list-one").hover(function(){
			$(this).find("a").addClass("active");
			$(this).find("ul").fadeIn();
		},function(){
			$(this).find("a").removeClass("active");
			$(this).find("ul").fadeOut();
		})
	</script>
</body>
</html>